<template>
	<view class="home">
		<view class="home_top">
			<view class="home_top_Background_Box">
				<view class="home_top_Background"></view>
			</view>
			<view class="ceiling">
				<!-- 	<view class="home_top_content">
					<view class="home_top_content_search">
						<view @click="sousuo" class="home_top_content_search_input_box">
							<u-input disabled class="home_top_content_search_input" placeholder="更美好的生活品质从这里开始"
								prefixIcon="search" prefixIconStyle="font-size: 44upx;color: #909399">
							</u-input>
						</view>
						<image src="../../static/home/customerService2.png" @click="customer()"
							class="home_top_content_search_customerService" mode="widthFix"></image>
					</view>
				</view> -->
			</view>
			<view style="padding: 0 30upx;">
				<view class="Carousel">
					<u-swiper imgMode="scaleToFill" indicatorMode="dot" indicator circular height="324upx"
						keyName="picturesLinking" :list="BannerList">
					</u-swiper>
				</view>
			</view>

			<view class="home_top_announcement">
				<!-- <view class="home_top_announcement_left">
					<image src="../../static/trumpet2.png" mode="widthFix"></image>
				</view>
				<view class="home_top_announcement_right">
					弹屏公告滚动播放，播放完毕自动消失
				</view> -->
				<u-notice-bar :text="announcementList" direction="column" speed="250">
					<!-- <template slot="icont">
						<template slot="icon">
							<image style="width:22upx;height:20upx;margin-right:15upx;" src="../../static/trumpet2.png"
								mode="widthFix"></image>
						</template>
					</template> -->
				</u-notice-bar>
			</view>

		</view>

		<swiper @change="change" class="swiperitem">
			<swiper-item>
				<view class="application_top">
					<view @click="TaobaoUrl" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/Taobao2.png" mode="heightFix">
							</image>
						</view>
						<view class="application_top_list_text"> 淘宝 </view>
					</view>
					<view @click="JDListUrl" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/JD2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 京东 </view>
					</view>
					<view @click="jump(28)" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/pdd2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 拼多多 </view>
					</view>
					<view @click="mallrouter" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/mall.png" mode="widthFix">
							</image>
						</view>
						<view style="margin-top: 6upx;" class="application_top_list_text"> 牛粉商城 </view>
					</view>
					<view @click="PolyCostEffective" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/Juhuasuan.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 聚划算 </view>
					</view>
					<view @click="tmallGlobal" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/tianmaoguoji2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 天猫国际 </view>
					</view>
					<view @click="Tmall" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/tianmao2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 天猫超市 </view>
					</view>


					<view class="application_top_list" @click="jump(4)">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/CatsEye2.png" mode="widthFix">
							</image>
						</view>
						<view style="margin-top: 2upx;" class="application_top_list_text"> 电影 </view>
					</view>
					<view class="application_top_list" @click="jump(1)">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/TY2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 优惠加油 </view>
					</view>
					<view @click="jump(88)" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/Meituan2.png" mode="widthFix">
							</image>
						</view>
						<view style="margin-top:2upx" class="application_top_list_text"> 美团 </view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="application_top">
					<view @click="element()" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/elm2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 饿了么 </view>
					</view>
					<view @click="Vipshop" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/weipinhui2.png" mode="widthFix">
							</image>
						</view>
						<view style="margin-top: 6upx;" class="application_top_list_text"> 唯品会 </view>
					</view>
					<view @click="gorechange" class="application_top_list">
						<view class="application_top_list_imgbox">
							<image src="../../static/home/Recharge2.png" mode="widthFix">
							</image>
						</view>
						<view class="application_top_list_text"> 充值 </view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="indicatorBox">
			<u-swiper-indicator indicatorActiveColor="#FC6758" indicatorInactiveColor="#FFCACA" :length="2"
				:current="currentIndex" indicatorMode="dot"></u-swiper-indicator>
		</view>

		<view class="vip_big">
			<view class="vip_box">
				<image src="../../static/tabsIcon/viplogo2.png" mode=""></image>
				<!-- 	<view v-if="mine.isVip==1" class="ms">
					{{mine.expirationTime | times}}到期
				</view> -->
				<view class="ms">
					加入VIP有好礼
				</view>
				<view v-if="mine.isVip==1" @click="govip()" class="btn">
					立即续费
				</view>
				<view v-else @click="govip()" class="btn">
					立即开通
				</view>
			</view>
		</view>

		<!-- 	<view @click="oilCardUrl" class="SpikeBig">
			<image src="../../static/home/youka2.png" mode="widthFix"></image>
		</view> -->
		<view class="ListBox">
			<view class="ListBox_title">
				<view class="ListBox_title_left">
					<view class="ListBox_title_left_l"></view>
					<view class="ListBox_title_left_r">优选好物</view>
				</view>
				<view @click="More" class="ListBox_title_right"> 查看更多 ></view>
			</view>
			<u-sticky :customNavHeight="customNavHeight">
				<view class="ListBox_tabs">
					<view @click="tab(item.id)" :class="tabNum == item.id?'ListBox_tabs_li_active':''"
						v-for="(item , index) in tabsarr" class="ListBox_tabs_li">
						{{item.name}}
					</view>
				</view>
			</u-sticky>
			<view class="ListBoxContent">
				<view @click="detail(item)" v-for="(item,index) in List" class="VIPMall_content_list">
					<view class="VIPMall_content_list_image">
						<image :src="item.coverUrl" mode=""></image>
					</view>
					<view class="VIPMall_content_list_content">
						<view class="VIPMall_content_list_content_title">
							{{item.name}}
						</view>
						<view v-if="item.type == 0" class="VIPMall_content_list_content_center">
							<view class="VIPMall_content_list_content_center_left">
								原价 ¥{{Number(item.price)}}
							</view>
							<view class="VIPMall_content_list_content_center_left">
								已售{{item.saleNum}}
							</view>
						</view>
						<view v-if="item.type == 1" class="VIPMall_content_list_content_center">
							<view class="VIPMall_content_list_content_center_left">
								30天已售 {{Number(item.saleNum)}}
							</view>
							<view class="VIPMall_content_list_content_center_left">
								{{item.goodRate}}%好评率
							</view>
						</view>
						<view v-if="item.type == 2" class="VIPMall_content_list_content_center">
							<view class="VIPMall_content_list_content_center_left">
								原价 ¥{{Number(item.price)}}
							</view>
							<view class="VIPMall_content_list_content_center_left">
								折扣率{{item.discountRate}}
							</view>
						</view>
						<view class="VIPMall_content_list_content_bottom">
							<view v-if="item.type == 1" class="VIPMall_content_list_content_bottom_left">
								<text>拼购价&nbsp;¥</text>
								{{Number(item.discountPrice)}}
							</view>
							<view v-else class="VIPMall_content_list_content_bottom_left">
								<text>折扣价&nbsp;¥</text>
								{{Number(item.discountPrice)}}
							</view>
							<view class="VIPMall_content_list_content_yongjin">
								<view class="VIPMall_content_list_content_yongjin_left">
									佣金
								</view>
								<view class="VIPMall_content_list_content_yongjin_right">
									<view class="VIPMall_content_list_content_yongjin_right_view">
										￥{{Number(item.showMoney).toFixed(2)}}
									</view>
								</view>
							</view>
						</view>



					</view>
				</view>

				<!-- <view @click="detail(item)" v-for="(item, index) in List" class="ListBoxContent_list">
					<view class="ListBoxContent_list_image">
						<image :src="item.mainImages" mode=""></image>
					</view>
					<view class="ListBoxContent_list_content">
						<view class="ListBoxContent_list_content_title">
							{{ item.name }}
						</view>
						<view class="ListBoxContent_list_content_text">
							VIP价<text class="ListBoxContent_list_content_text_numTi">￥</text><text
								class="ListBoxContent_list_content_text_num">{{
                item.memberPrice
              }}</text><text class="ListBoxContent_list_content_text_Past">{{
                item.price
              }}</text>
						</view>
					</view>
				</view> -->
			</view>
			<u-back-top :iconStyle="iconStyle" :scrollTop="scrollTop" mode="square"></u-back-top>
			<u-loadmore @loadmore="addmodle" :status="status" />
		</view>
	</view>
</template>
<script>
	import {
		Update
	} from '@/api/upload'
	import {
		bootbannergetBannerList,
		bootgoodsselectpage,
		taobaolist,
		bootbulletinBoardgetBulletinBoardList,
		bootsysConfigcommissionpercent,
		bootsysConfigdata,
		appversioncheck,
		bootjingdongcategory,
		preferredgoodslist,
		taobaopreferredlist
	} from "@/api/home";
	import {
		getinfo
	} from '@/api/mine'
	export default {
		data() {
			return {
				tabNum: '',
				tabsarr: [{
					id: 1,
					name: '女装'
				}, {
					id: 2,
					name: '母婴'
				}, {
					id: 3,
					name: '美妆'
				}, {
					id: 4,
					name: '居家日用'
				}, {
					id: 5,
					name: '鞋品'
				}, {
					id: 6,
					name: '美食'
				}, {
					id: 7,
					name: '文娱车品'
				}, {
					id: 8,
					name: '数码家电'
				}, {
					id: 9,
					name: '男装'
				}, {
					id: 10,
					name: '内衣'
				}, {
					id: 11,
					name: '箱包'
				}, {
					id: 12,
					name: '配饰'
				}, {
					id: 13,
					name: '户外运动'
				}, {
					id: 14,
					name: '家装家纺'
				}],
				currentIndex: 0,
				LinkType: 'switchTab',
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				scrollTop: 0,
				BannerList: [],
				status: "loadmore",
				announcementList: [],
				queryInquire: {
					pageSize: 10,
					pageNum: 1,
				},
				loding: false,
				List: [],
				over: false,
				customNavHeight: 0,
				bilv: 0,
				mine: [],
				qeury: '',
				listType: 0
			};
		},
		onShow() {},
		created() {
			this.appversioncheck()
			// #ifdef APP
			uni.getSystemInfo({
				success: (res) => {
					this.customNavHeight += (res.statusBarHeight * 2)
					this.customNavHeight -= 6
				}
			})
			// #endif
			this.bootbannergetBannerList();
			// this.bootgoodsselectpage();

			this.bootsysConfigdata();
			this.bootsysConfigcommissionpercent();
			this.bootbulletinBoardgetBulletinBoardList();
			this.getinfo();
			this.addmodle();
			Update()
		},
		onReachBottom() {
			this.addmodle();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			bootjingdongcategory() {
				bootjingdongcategory().then(res => {
					this.tabsarr = res.data
				})
			},
			appversioncheck() {
				let this_ = this;
				appversioncheck({
					type: 0,
					version: uni.version
				}).then(res => {
					if (res.success == 1) {
						if (res.data.isConstraint == 3) {
							// if (res.data.isConstraint == 0) {
							// console.log()
							uni.setStorageSync('versiontype', JSON.stringify(res.data));
							uni.versiontype = true
							setTimeout(() => {
								uni.showModal({
									title: '提示',
									content: '发现新版本' + res.data.version + '！',
									showCancel: false,
									success: function(ress) {
										if (ress.confirm) {
											plus.runtime.openURL(res.data.fullPath, function(
												res) {

											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}, 1000)
							// } else {
							// 	// plus.runtime.quit()
							// 	// plus.runtime.openURL(res.data.fullPath, function(res) {

							// 	// })
							// }
						}
					}
				})
			},
			bootsysConfigdata() {
				bootsysConfigdata('tao_bao_key_word').then(res => {
					if (res.success == 1) {
						this.qeury = res.data
						// this.queryInquire.queryParams = res.data
						// this.preferredgoodslist();
					}
				})
			},
			getinfo() {
				getinfo().then(res => {
						if (res.success == 1) {
							this.mine = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
			govip() {
				uni.navigateTo({
					url: '../mine/vip'
				})
			},
			bootsysConfigcommissionpercent() {
				bootsysConfigcommissionpercent().then(res => {
					this.bilv = Number(res.data) / 100
					// console.log(this.bilv)
				})
			},
			commission(item) {
				return ((item * 0.15) * this.bilv).toFixed(2);
				// return row
			},
			tab(id) {
				if (this.tabNum == id) {
					this.tabNum = ''
					this.queryInquire.pageNum = 1
					this.queryInquire.categoryId = ''
					this.queryInquire.queryParams = ""
					this.List = []
					this.over = false
					this.status = 'loadmore'
					this.listType = 0
					this.addmodle();
				} else {
					this.tabNum = id
					this.queryInquire.pageNum = 1
					this.queryInquire.categoryId = this.tabNum
					this.List = []
					this.over = false
					this.status = 'loadmore'
					this.listType = 1
					this.queryInquire.queryParams = ""
					this.addmodle();
				}
			},
			// 滚动
			bootbulletinBoardgetBulletinBoardList() {
				bootbulletinBoardgetBulletinBoardList({
					// pageNum: 1,
					pageSize: 10,
					// title: ''
				}).then(res => {
					let arr = [];
					// console.log(res.data)
					res.data.forEach(item => {
						arr.push(item.record)
					})

					for (var i = 0, len = arr.length; i < len; i++) {
						var rand = parseInt(Math.random() * len);
						var temp = arr[rand];
						arr[rand] = arr[i];
						arr[i] = temp;
					}
					this.announcementList = arr
				})
				setTimeout(() => {
					this.bootbulletinBoardgetBulletinBoardList();
				}, 300000)
			},
			change(e) {
				const {
					current
				} = e.detail
				this.currentIndex = current;
			},
			detail(row) {
				if (row.type == 0) {
					uni.navigateTo({
						url: '/pages/index/Taobaodetail/Taobaodetail?id=' + row.goodsId
					});
				}
				if (row.type == 1) {
					uni.navigateTo({
						url: '/pages/index/JDdetail/JDdetail?id=' + row.goodsId
					});
				}
				if (row.type == 2) {
					uni.navigateTo({
						url: '/pages/index/Vipshopdetail/Vipshopdetail?id=' + row.goodsId
					});
				}
			},
			element() {
				uni.navigateTo({
					url: "/pages/index/element/element",
				});
			},
			Vipshop() {
				uni.navigateTo({
					url: "/pages/index/Vipshop/Vipshop",
				});
			},
			PolyCostEffective() {
				uni.navigateTo({
					url: "/pages/index/Taobao/Taobao?type=4",
				});
			},
			tmallGlobal() {
				uni.navigateTo({
					url: "/pages/index/Taobao/Taobao?type=2",
				});
			},
			Tmall() {
				uni.navigateTo({
					url: "/pages/index/Taobao/Taobao?type=3",
				});
			},
			jump(num) {
				if (num == 1) {
					uni.navigateTo({
						url: '../massoil/massoil'
					})
				} else if (num == 4) {
					uni.navigateTo({
						url: '../moive/moive'
					})
				} else if (num == 88) {
					uni.navigateTo({
						url: './meituan/meituan'
					})
				} else if (num == 28) {
					uni.navigateTo({
						url: './pdd/pdd'
					})
				}
			},
			gorechange() {
				uni.showToast({
					icon: 'none',
					title: '功能正在接洽，敬请期待',
					duration: 1000
				})
				return
				// uni.navigateTo({
				// 	url: './recharge/phonerechange'
				// })
			},
			customer() {
				uni.navigateTo({
					url: "/pages/club/customer",
				});
			},
			addmodle() {
				if (this.over == true) {
					return;
				}
				if (this.status == "loadmore" && this.listType == 0) {
					this.preferredgoodslist();
				}
				if (this.status == "loadmore" && this.listType == 1) {
					this.taobaopreferredlist();
				}

			},
			taobaopreferredlist() {
				this.status = "loading";
				taobaopreferredlist(this.queryInquire)
					.then((res) => {
						if (res.success == 1) {
							this.List = this.List.concat(res.data);
							if (res.data.length < 10) {
								this.over = true;
								setTimeout(() => {
									this.status = "nomore";
								}, 0);
							} else {
								this.queryInquire.pageNum++;
							}
						}
					})
					.finally(() => {
						this.status = "loadmore";
					});
			},
			preferredgoodslist() {
				this.status = "loading";
				preferredgoodslist(this.queryInquire)
					.then((res) => {
						if (res.success == 1) {
							this.List = this.List.concat(res.data.records);
							if (res.data.records.length < 10) {
								this.queryInquire.queryParams = this.qeury
								this.listType = 1
								this.$nextTick(() => {
									setTimeout(() => {
										this.addmodle()
									}, 0)
								})
								// this.over = true;
								// setTimeout(() => {
								// 	this.status = "nomore";
								// }, 0);
							} else {
								this.queryInquire.pageNum++;
							}
						}
					})
					.finally(() => {
						this.status = "loadmore";
					});
			},
			mallrouter() {
				uni.navigateTo({
					url: "/pages/index/mallList/mallList"
				});
			},
			bootgoodsselectpage() {
				if (this.queryInquire.pageNum == 4) {
					this.over = true;
					setTimeout(() => {
						this.status = "nomore";
					}, 0);
					return
				}


				// this.status = "loading";
				bootgoodsselectpage(this.queryInquire)
					.then((res) => {
						if (res.success == 1) {
							this.List = this.List.concat(res.data.records);
							if (res.data.current == res.data.pages) {
								this.over = true;
								setTimeout(() => {
									this.status = "nomore";
								}, 0);
							} else {
								this.queryInquire.pageNum++;
							}
						}
					})
					.finally(() => {
						this.status = "loadmore";
					});
			},
			bootbannergetBannerList() {
				bootbannergetBannerList(7).then((res) => {
					this.BannerList = res.data;
				});
			},
			More() {
				uni.navigateTo({
					url: "/pages/index/VIPMall/VIPMall",
					animationType: "fade-in",
				});
			},
			sousuo() {
				uni.navigateTo({
					url: "/pages/index/search/search",
					animationType: "fade-in",
				});
			},
			// detail(row) {
			// 	uni.navigateTo({
			// 		url: "/pages/index/detail/detail?id=" + row.id,
			// 	});
			// },
			oilCardUrl() {
				uni.navigateTo({
					url: "/pages/index/oilCard/oilCard",
				});
			},
			JDListUrl() {
				uni.navigateTo({
					url: "/pages/index/JDList/JDList"
				});
			},
			TaobaoUrl() {
				// uni.reLaunch({
				// 	url: '/pages/login/login'
				// });
				uni.navigateTo({
					url: "/pages/index/Taobao/Taobao?type=0",
				});
			},
		},
	};
</script>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	// page {
	// 	// background-color: #e5e7e9;
	// 	// background-color: #F4F4F4;
	// 	filter: grayscale(1);
	// }

	.home {
		width: 100%;

		.home_top {
			width: 100%;
			height: 400upx;
			padding-top: calc(50upx + var(--status-bar-height));
			// background-image: url(../../static/home/top.png);
			// background-image: url(../../static/home/top.png);
			background-size: 100% 100%;
			// padding: 18upx 32upx;
			position: relative;

			.home_top_Background_Box {
				position: absolute;
				width: 100%;
				height: 400upx;
				left: 0;
				top: 0;
				overflow: hidden;
				z-index: 0;

				.home_top_Background {
					position: absolute;
					top: calc(-94% + var(--status-bar-height));
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: #FC6758;
					border-radius: 100%;
					width: 200%;
					height: 200vw;
				}
			}

			.ceiling {
				padding: 0 30upx;
				padding-top: calc(20upx + var(--status-bar-height));
				background-color: #FC6758;
				position: fixed;
				top: 0;
				height: calc(40upx + var(--status-bar-height));
				z-index: 3;
				width: 100%;
				left: 0;
				padding-bottom: 20upx;

				.home_top_content {
					position: relative;
					// margin-top: calc(var(--status-bar-height) + 20upx);

					.home_top_content_search {
						display: flex;
						align-items: center;

						.home_top_content_search_input_box {
							width: calc(100% - 54upx - 44upx);
							margin-right: 54upx;

							.home_top_content_search_input {
								background-color: #fff;
								border: none;
								border-radius: 28upx;
							}
						}

						.home_top_content_search_customerService {
							width: 44upx;
							height: 44upx;
						}
					}
				}

			}

			.home_top_announcement {
				position: relative;
				// position: absolute;
				// top: calc(var(--status-bar-height) + 104upx);
				z-index: 2;
				margin-top: 30upx;
				display: flex;
				padding: 6upx 20upx;
				border-radius: 24upx;
				// background-color: rgba(0, 0, 0, 0.8);
				align-items: center;

				/deep/ .u-notice-bar {
					background-color: rgba(0, 0, 0, 0) !important;
					padding: 0 37upx;

					.u-notice__swiper__item__text {
						color: #333333 !important;
					}
				}

				// 	.home_top_announcement_left {
				// 		font-size: 0;
				// 		margin-right: 10upx;

				// 		image {
				// 			width: 22upx;
				// 			height: 20upx;
				// 		}
				// 	}

				// 	.home_top_announcement_right {
				// 		font-size: 24upx;
				// 		font-family: PingFangSC-Regular, PingFang SC;
				// 		font-weight: 400;
				// 		// color: #ffffff;
				// 		color: rgba(0, 0, 0, 0.8);
				// 		// background-color: #007AFF;
				// 		line-height: 40upx;
				// 	}

			}

			.Carousel {
				// position: absolute;
				// top: 180upx;
				min-height: 324upx;
				border-radius: 26upx;
				background-color: #fff;
				// margin-top: 30upx;
				border-radius: 10upx;
				overflow: hidden;
				// margin-bottom: -66upx;
			}
		}

		.swiperitem {
			height: calc(370upx + var(--status-bar-height));
			width: 100%;
			overflow: hidden;
		}

		.indicatorBox {
			display: flex;
			justify-content: center;

			/deep/ .u-swiper-indicator__wrapper__dot--active {
				width: 10upx;
			}
		}

		.application_top {
			// background-color: #ffffff;
			margin-top: 20upx;
			padding: 30upx;
			display: flex;
			align-items: flex-end;
			flex-wrap: wrap;
			padding-top: 50upx;
			padding-top: calc(50upx + var(--status-bar-height));

			.application_top_list {
				width: 20%;
				text-align: center;
				margin-bottom: 12upx;

				// &:nth-child(n + 6) {
				// 	margin-bottom: 0;
				// }

				&:nth-child(n + 11) {
					margin-bottom: 0;
				}

				.application_top_list_imgbox {
					font-size: 0;

					image {
						width: 88upx;
						max-width: 88upx;
						max-height: 88upx;
					}
				}

				.application_top_list_text {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);
					line-height: 40upx;
					margin-top: 4upx;
				}
			}
		}

		.SpikeBig {
			width: 100%;
			// height: 392upx;
			// background-color: #000000;
			font-size: 0;
			overflow: hidden;
			font-size: 0;
			display: flex;
			align-items: center;

			image {
				width: 100%;
			}
		}

		.ListBox {
			// padding: 20upx 30upx 40upx 30upx;
			// padding: 5upx 5upx;
			padding-top: 20upx;


			.ListBox_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 50upx;
				padding-top: 0;

				.ListBox_title_left {
					// font-size: 34upx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 600;
					// color: rgba(0, 0, 0, 0.9);
					line-height: 48upx;
					font-size: 34upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FC6758;
					display: flex;
					// background-color: #1467FF;
					align-items: center;

					.ListBox_title_left_l {
						width: 14upx;
						height: 40upx;
						background: linear-gradient(0deg, #E6534D 0%, #FF9999 100%);
					}

					.ListBox_title_left_r {
						margin-left: 20upx;
					}

				}

				.ListBox_title_right {
					font-size: 22upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					// color: #ed2525;
					line-height: 32upx;
				}
			}

			.ListBox_tabs {
				padding: 20upx 40upx;
				padding-bottom: 30upx;
				overflow-y: hidden;
				white-space: nowrap;
				background-color: #FC6758;

				.ListBox_tabs_li {
					display: inline-block;
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 41upx;
					color: #ffffff;
					opacity: 1;
					margin-right: 53upx;
					position: relative;

					&:last-child {
						margin: 0;
					}
				}

				.ListBox_tabs_li_active {
					color: #ffffff;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: -20upx;
						background-color: #ffffff;
						width: 49upx;
						height: 8upx;
						background: #ffffff;
						opacity: 1;
						border-radius: 4upx;
						left: 50%;
						transform: translate(-50%);
					}
				}
			}

			.ListBoxContent {
				margin-top: 10upx;
				// display: flex;
				// flex-wrap: wrap;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 10upx;
				padding: 10upx 40upx;
				padding-bottom: 0;




				.VIPMall_content_list {
					width: calc((100% - 10upx) / 2);
					margin-bottom: 10upx;

					.VIPMall_content_list_image {
						width: 100%;
						height: 360upx;
						border-radius: 16upx 16upx 0px 0px;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.VIPMall_content_list_content {
						background-color: #FFFFFF;
						// height: 160upx;
						border-radius: 0 0 16upx 16upx;
						padding: 16upx 20upx 10upx 20upx;

						.VIPMall_content_list_content_title {
							font-size: 28upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.9);
							line-height: 40upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.VIPMall_content_list_content_center {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 18upx;
							color: #888;
							padding: 10upx 0;
							text-overflow: ellipsis;
							white-space: nowrap;
						}


						.VIPMall_content_list_content_bottom {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.VIPMall_content_list_content_bottom_left {
								color: #fc4d52;
								white-space: nowrap;
								font-size: 36upx;
								position: relative;
								line-height: 44upx;
								height: 44upx;

								text {
									font-size: 9upx;
								}
							}

							.VIPMall_content_list_content_bottom_right {
								.VIPMall_content_list_content_bottom_right_border_box {
									overflow: hidden;

									.VIPMall_content_list_content_bottom_right_border {
										font-style: normal;
										border-radius: 6upx;
										text-align: center;
										// border: 2upx solid #fd5a5f;
										text-overflow: ellipsis;
										white-space: nowrap;
										// background: #fff;
										color: #FFFFFF;
										background: linear-gradient(90deg, #EEC75D 0%, #F5E3C5 100%);
										padding: 6upx 16upx;
										font-size: 18upx;
										position: relative;

										&:after {
											content: '';
											position: absolute;
											left: -4px;
											top: 50%;
											margin-top: -3px;
											background: #fff;
											display: block;
											width: 5px;
											height: 5px;
											content: "";
											border-radius: 10px;
											border: 1px solid #FFFFFF;
										}

										&:before {
											position: absolute;
											left: auto;
											top: 50%;
											margin-top: -3px;
											background: #fff;
											display: block;
											width: 5px;
											height: 5px;
											content: "";
											border-radius: 10px;
											border: 1px solid #FFFFFF;
											right: -4px;
										}

										text {
											&:last-child {
												// border-right: 1px dashed #fd5a5f;
												// position: relative;
												margin-right: 8upx;

											}

											&:first-child {
												// border-right: 1px dashed #fd5a5f;
												// padding: 0 4upx;
												padding: 0 2upx;
											}
										}
									}
								}
							}
						}

						.VIPMall_content_list_content_yongjin {
							display: flex;
							margin-top: 16upx;

							.VIPMall_content_list_content_yongjin_left {
								background: linear-gradient(180deg, #868686 0%, #333333 100%);
								opacity: 1;
								border-radius: 8upx 0px 0px 8upx;
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 5upx 10upx;
								font-size: 16upx;
								font-family: PingFang SC;
								font-weight: 400;
								// line-height: 42upx;
								white-space: nowrap;
								color: #F1D388;

							}

							.VIPMall_content_list_content_yongjin_right {
								// height: 100%;
								// border: 2upx solid #707070;
								background: linear-gradient(180deg, #868686 0%, #333333 100%);
								opacity: 1;
								border-radius: 0px 8upx 8upx 0px;
								display: flex;
								justify-content: center;
								align-items: center;

								.VIPMall_content_list_content_yongjin_right_view {
									width: calc(100% - 4upx);
									height: calc(100% - 4upx);
									background-color: #ffffff;
									border-radius: 0px 8upx 8upx 0px;
									font-size: 16upx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #333333;
									padding: 5upx 10upx;

								}
							}
						}
					}
				}

			}
		}
	}

	.vip_big {
		padding: 20rpx 20rpx 0;

		.vip_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			// margin: 20rpx 0 30rpx;
			background: url(../../static/tabsIcon/mine/vipbg.png) no-repeat;
			background-size: 100% 100%;

			image {
				width: 44rpx;
				height: 38rpx;
			}

			.ms {
				color: #6A4714;
				font-size: 34rpx;
				font-weight: bold;
			}

			.btn {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 24rpx;
				background: linear-gradient(270deg, #855716 10%, #4A2E04 100%);
				border-radius: 20rpx;
			}
		}
	}
</style>
